import { Dropdown, Menu, Table, TableProps } from "antd";
import { User } from "type/user";
import { Project } from "type/project";
import { Link } from "react-router-dom";
import dayjs from "dayjs";
import { Pin } from "components/pin";
import { useDeleteProject, useEditProject } from "utils/project";
import { ButtonNoPadding } from "components/lib";
import { useProjectModal, useProjectQueryKey } from "./util";
interface ListProps extends TableProps<Project> {
  users: User[];
}
export const List = ({ users, ...props }: ListProps) => {
  const { mutate } = useEditProject(useProjectQueryKey());
  const mutateProject = (id: number) => (pin: boolean) =>
    mutate({ id, pin });

  return (
    <Table
      rowKey={"id"}
      pagination={false}
      columns={[
        {
          title: <Pin checked={true} disabled={true} />,
          render: (value, project) => {
            return (
              <Pin
                checked={project.pin}
                onCheckedChange={mutateProject(project.id)}
              />
            );
          },
        },
        {
          title: "名称",
          sorter: (a, b) => a.name.localeCompare(b.name),
          render: (value, project) => {
            return <Link to={String(project.id)}>{project.name}</Link>;
          },
        },
        {
          title: "部门",
          dataIndex: "organization",
        },
        {
          title: "负责人",
          render(value, project) {
            return (
              <span>
                {users.find((user) => user.id === project.personId)?.name ||
                  "未知"}
              </span>
            );
          },
        },
        {
          title: "创建时间",
          render(value, project) {
            return (
              <span>
                {project.created
                  ? dayjs(project.created).format("YYYY-MM-DD")
                  : "无"}
              </span>
            );
          },
        },
        {
          render(value, project) {
            return (
              <More project={project} />
            );
          },
        },
      ]}
      {...props}
    ></Table>
  );
};

const More = ({ project }: { project: Project }) => {
  const { mutate: deleteMutate } = useDeleteProject(useProjectQueryKey());
  const { startEdit } = useProjectModal();
  const editProject = (id: number) => () => startEdit(id);
  const deleteProject = (id: number) => () => deleteMutate({ id });

  return (
    <Dropdown overlay={
      <Menu>
        <Menu.Item>
          <ButtonNoPadding type={"link"} key={'edit'} onClick={editProject(project.id)}>编辑</ButtonNoPadding>
        </Menu.Item>
        <Menu.Item>
          <ButtonNoPadding type={"link"} key={'delete'} onClick={deleteProject(project.id)}>删除</ButtonNoPadding>
        </Menu.Item>
      </Menu>
    }>
      <ButtonNoPadding type={"link"}>...</ButtonNoPadding>
    </Dropdown>
  )
}
